<template>
   <div class="register_tab">
       <van-form>
           <van-field name="uploader" label="上传头像">
               <template #input>
                   <van-uploader v-model="uploader" />
               </template>
           </van-field>
           <van-cell-group>
               <van-field
                       v-model="phone"
                       required
                       label="手机号"
                       placeholder="请输入手机号"
                       :rules="[
                         { required: true },
                         { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
        ]"
               />
               <van-field
                       v-model="sms"
                       center
                       clearable
                       label="短信验证码"
                       placeholder="请输入短信验证码"
               >
                   <template #button>
                       <van-button size="small" type="primary">发送验证码</van-button>
                   </template>
               </van-field>
               <van-field
                       v-model="password"
                       required
                       type="password"
                       label="密码"
                       placeholder="请输入密码"
               />
               <van-field
                       v-model="repassword"
                       required
                       type="password"
                       label="确认密码"
                       placeholder="请再次输入密码"
               />
           </van-cell-group>

       </van-form>
       <div style="margin: 16px">
           <van-button round block type="info" native-type="submit" @click="onsubmit">注册</van-button>
       </div>
   </div>
</template>

<script>
   import { Toast } from 'vant';
    export default {
        data() {
            return {
                phone:'',
                sms:'',
                password:'',
                repassword:'',
                uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],

            };
        },
        methods: {
            onsubmit(){
                if(this.phone==""||this.sms==""||this.password==""||this.repassword==""){
                    Toast('注册失败！信息未完善');
                }
                else if(this.password!=this.repassword){
                    Toast('密码输入两次不一致！');
                }
                else{
                    Toast.success('注册成功');
                }
            }
        },
    };
</script>

<style scoped>
.register_tab{
    margin-top:15px;
}
    .icon-back{
        position: absolute;
        left: 5px;
        top:15px
    }
   
</style>

